<template>
  <t-dialog v-model:visible="formVisible" :header="$t('购买确认')" :width="680" :footer="false">
    <template #body>
      <t-form-item :label="$t('确认支付吗？支付后，请及时联系客服。')" name="isOnShelf"> </t-form-item>
      <t-form ref="form" :data="formData" :rules="rules" :label-width="100">
        <!-- 添加下拉框 -->
        <!-- 只有当buyType为'service'时才显示下拉框 -->
        <t-form-item v-if="isService" label="选择时间" name="selectedTime">
          <t-select v-model="formData.selected" :options="timeOptions" />
        </t-form-item>
        <!--这里上面本来有个 @submit="onSubmit"-->
        <t-form-item style="float: right">
          <t-button variant="outline" @click="onClickCloseBtn">暂不付款</t-button>
          <t-button theme="primary" type="submit" @click="onClickConfirmBtn">确认支付</t-button>
        </t-form-item>
      </t-form>
    </template>
  </t-dialog>
</template>

<script setup lang="ts">
import { FormRules, MessagePlugin, SubmitContext } from 'tdesign-vue-next';
import type { PropType } from 'vue';
import { computed, ref, watch } from 'vue';

import router from '@/router';
import { userBuy } from '@/api/list';
import axios from 'axios';

export interface FormData {
  name: string;
  status: string;
  description: string;
  type: string;
  mark: string;
  amount: number;
}

const INITIAL_DATA: FormData = {
  name: '',
  status: '',
  description: '',
  type: '',
  mark: '',
  amount: 0,
};

const SELECT_OPTIONS = [
  { label: '宠物', value: '1' },
  { label: '宠物服务', value: '2' },
  { label: '宠物用品', value: '3' },
];

const props = defineProps(
  {
    visible: {
      type: Boolean,
      default: false,
    },
    goodid: {
      type: String,
      required: true,
    },
    orderid: {
      type: String,
      required: true,
    },
    number: {
      type: String,
      required: true,
    },
    sTimeBegin: {
      type: Array,
    },
    sTimeEnd: {
      type: Array,
    },
    sTimeId: {
      type: Array,
    },
    sAvailable: {
      type: Array,
    },
    buyType: {
      type: String,
      required: true,
    },
  // timeBegin: {
  //   type: Array,
  // },
  // timeEnd: {
  //   type: Array,
  // },
},
  // data: Object as PropType<FormData>,
);
const formVisible = ref(false);
// 表单数据
const formData = ref({
  selected: null,
});
// 以下数据不筛选available
// const timeOptions = computed(() => {
//   return props.sTimeBegin.map((begin, index) => {
//     return {
//       label: `${begin} -${props.sTimeEnd[index]}`,
//       value: index, // 使用索引作为值
//     };
//   });
// });
// 以下数据筛选available
const timeOptions = computed(() => {
  return props.sTimeBegin
    .map((begin, index) => {
      // 只有当sAvailable为true时才返回选项
      if (props.sAvailable[index]) {
        return {
          label: `${begin} -${props.sTimeEnd[index]}`,
          value: index, // 使用索引作为值
        };
      }
      return null; // 否则返回null
    })
    .filter((option): option is { label: string; value: number } => option !== null);
});
// 控制下拉框是否显示
const isService = computed(() => props.buyType === 'service');

const textareaValue = ref('');
/*
const onSubmit = ({ validateResult, firstError }: SubmitContext) => {
  if (!firstError) {
    // 创建订单。将其状态设置为已付款
    userBuy();
    MessagePlugin.success('购买成功！');
    formVisible.value = false;
    router.push('/user/order');
  } else {
    console.log('Errors: ', validateResult);
    MessagePlugin.warning(firstError);
  }
}; */
console.log(props.buyType, '我是奶龙购物车类型');
// const selected = ''; // 用户选择第几个时间
const onClickConfirmBtn = async () => {
  // 创建订单。将其状态设置为已付款
  try {
    // 先判定商品类型，然后决定调用哪种购买api
    if (props.buyType === 'item') {
      MessagePlugin.info('正在为您创建订单...');
      // 这是一般商品类的添加订单API
      const response = await axios.get('/api/user/addOrder', {
        params: {
          id: props.goodid, // 商品id
          number: props.number, // 购买数量
        },
      });
      const realorderid = response.data.data.order_id;
      // 实现购买：先获取订单id(由创建api返回)，再把它传给购买api，这是共用的
      const response1 = await axios.get('/api/user/buy', {
        params: {
          id: realorderid, // 真正的订单id
        },
      });
      // 将购物车中的条目删除，这无关商品还是服务
      const response2 = await axios.delete('/api/user/deleteCart', {
        params: {
          id: props.orderid, // 购物车id，实际上这里的orderid是购物车条目的id而不是订单的id
        },
      });
      // 处理响应数据（如果需要）
      console.log(response.data);
      console.log(response1.data);
      console.log(response2.data);
      if (response1.data.success === true && response2.data.success === true && response.data.success === true) {
        MessagePlugin.success('购买成功！');
      }
      if (response1.data.success === false) {
        MessagePlugin.error('库存不足，请联系店员或稍后再试。');
      }

      // 如果请求成功，显示消息，关闭表单，并导航到订单页面

      formVisible.value = false; // 假设formVisible是一个响应式的引用(ref)
      router.push('/user/order'); // 导航到用户订单页面
    } else if (props.buyType === 'service') {
      MessagePlugin.info('正在为您创建服务订单...');
      // MessagePlugin.info(`${props.sTimeId}`);
      // MessagePlugin.info(`${formData.value}`);
      // MessagePlugin.info(`${props.sTimeId[formData.value.selected - 1]}`);
      // 这是服务的添加订单API
      const response = await axios.get('/api/user/orderService', {
        params: {
          id: props.sTimeId[formData.value.selected], // 服务id
        },
      });
      const realorderid = response.data.data.order_id;
      // 实现购买：先获取订单id(由创建api返回)，再把它传给购买api，这是共用的
      const response1 = await axios.get('/api/user/buy', {
        params: {
          id: realorderid, // 真正的订单id
        },
      });
      // 将购物车中的条目删除，这无关商品还是服务
      const response2 = await axios.delete('/api/user/deleteCart', {
        params: {
          id: props.orderid, // 购物车id，实际上这里的orderid是购物车条目的id而不是订单的id
        },
      });
      // 处理响应数据（如果需要）
      console.log(response.data);
      console.log(response1.data);
      console.log(response2.data);
      if (response1.data.success === true && response2.data.success === true && response.data.success === true) {
        MessagePlugin.success('购买成功！');
      }
      if (response1.data.success === false) {
        MessagePlugin.error('库存不足，请联系店员或稍后再试。');
      }

      // 如果请求成功，显示消息，关闭表单，并导航到订单页面

      formVisible.value = false; // 假设formVisible是一个响应式的引用(ref)
      router.push('/user/order'); // 导航到用户订单页面
    }

  } catch (error) {
    // 处理请求错误
    console.error('购买失败:', error);
    // 可以选择显示一个错误消息给用户
    MessagePlugin.error('购买失败，请稍后再试。');
  }
};

const onClickCloseBtn = async () => {
  // 创建订单，设置状态为待付款
  try {
    // 先判定商品类型，然后决定调用哪种购买api
    if (props.buyType === 'item') {
      // MessagePlugin.info('正在为您创建订单...');
      // 这是一般商品类的添加订单API
      const response = await axios.get('/api/user/addOrder', {
        params: {
          id: props.goodid, // 商品id
          number: props.number, // 购买数量
        },
      });
      const realorderid = response.data.data.order_id;
      // 实现购买：先获取订单id(由创建api返回)，再把它传给购买api，这是共用的
      // const response1 = await axios.get('/api/user/buy', {
      //   params: {
      //     id: realorderid, // 真正的订单id
      //   },
      // });
      // 将购物车中的条目删除，这无关商品还是服务
      const response2 = await axios.delete('/api/user/deleteCart', {
        params: {
          id: props.orderid, // 购物车id，实际上这里的orderid是购物车条目的id而不是订单的id
        },
      });
      // 处理响应数据（如果需要）
      console.log(response.data);
      // console.log(response1.data);
      console.log(response2.data);
      // if (response1.data.success === true && response2.data.success === true && response.data.success === true) {
      //   MessagePlugin.success('购买成功！');
      // }
      // if (response1.data.success === false) {
      //   MessagePlugin.error('库存不足，请联系店员或稍后再试。');
      // }

      // 如果请求成功，显示消息，关闭表单，并导航到订单页面

      formVisible.value = false; // 假设formVisible是一个响应式的引用(ref)
      router.push('/user/order'); // 导航到用户订单页面
    } else if (props.buyType === 'service') {
      // MessagePlugin.info('正在为您创建服务订单...');
      // MessagePlugin.info(`${props.sTimeId}`);
      // MessagePlugin.info(`${formData.value}`);
      // MessagePlugin.info(`${props.sTimeId[formData.value.selected - 1]}`);
      // 这是服务的添加订单API
      const response = await axios.get('/api/user/orderService', {
        params: {
          id: props.sTimeId[formData.value.selected], // 服务id
        },
      });
      const realorderid = response.data.data.order_id;
      // 实现购买：先获取订单id(由创建api返回)，再把它传给购买api，这是共用的
      // const response1 = await axios.get('/api/user/buy', {
      //   params: {
      //     id: realorderid, // 真正的订单id
      //   },
      // });
      // 将购物车中的条目删除，这无关商品还是服务
      const response2 = await axios.delete('/api/user/deleteCart', {
        params: {
          id: props.orderid, // 购物车id，实际上这里的orderid是购物车条目的id而不是订单的id
        },
      });
      // 处理响应数据（如果需要）
      console.log(response.data);
      // console.log(response1.data);
      console.log(response2.data);
      // if (response1.data.success === true && response2.data.success === true && response.data.success === true) {
      //   MessagePlugin.success('购买成功！');
      // }
      // if (response1.data.success === false) {
      //   MessagePlugin.error('库存不足，请联系店员或稍后再试。');
      // }

      // 如果请求成功，显示消息，关闭表单，并导航到订单页面

      formVisible.value = false; // 假设formVisible是一个响应式的引用(ref)
      router.push('/user/order'); // 导航到用户订单页面
    }
  } catch (error) {
    // 处理请求错误
    console.error('加入订单失败:', error);
    // 可以选择显示一个错误消息给用户
    MessagePlugin.error('订单创建失败，请联系管理员或稍后重试。');
  }
  // router.push('/shop/goods');
};

const emit = defineEmits(['update:visible']);
watch(
  () => formVisible.value,
  (val) => {
    emit('update:visible', val);
  },
);

watch(
  () => props.visible,
  (val) => {
    formVisible.value = val;
  },
);

watch(
  () => props.data,
  (val) => {
    formData.value = val;
  },
);

const rules: FormRules<FormData> = {
  name: [{ required: true, message: '请输入产品名称', type: 'error' }],
};
</script>
